<template>
  <div id="account">
    <el-table
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            border
            id="table"
            :row-class-name="tableRowClassName">
      <el-table-column
              prop="userId"
              align="center"
              label="ID"
      ></el-table-column>
      <el-table-column
              prop="roleId"
              align="center"
              label="学号"
      >
      </el-table-column>
      <el-table-column
              align="center"
              prop="name"
              label="姓名"
      >
      </el-table-column>
      <el-table-column
              prop="role"
              align="center"
              label="角色"
      ></el-table-column>
      <el-table-column
              prop="departmentName"
              align="center"
              label="学院"
      ></el-table-column>
      <el-table-column
              align="center"
              label="操作">
        <template slot-scope="scope">
        <el-button v-show="scope.row.isFreeze === 1" type="success" @click="releaseFreeze(scope.row.userId)">解冻</el-button>
        <el-button v-show="scope.row.isFreeze === 0" type="primary" @click="freeze(scope.row.userId)">冻结</el-button>
      </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,8,10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AccountManagement",
    data(){
      return {
        result : "",
        pageSize:8,
        currentPage:1,
        tableData: []
      }
    },
    mounted() {
      this.$http({
        url : "/epidemic/admin/getAllUser",
        method : "post"
      }).then(res => {
        this.tableData = res.data.data
        //未登录
        if(this.result.status === 401){
          this.$router.push('/')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    methods:{
      tableRowClassName({row, rowIndex}) {
        let index = (this.currentPage-1)*this.pageSize+rowIndex
        if (this.tableData[index].isFreeze === 1) {
          return 'warning-row';
        }
        return '';
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      freeze(userId){
        this.$http.get('/epidemic/admin/freezeUser?userId='+userId).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            this.tableData.map(item => {
              if(item.userId == userId)item.isFreeze = 1
            })
          }
        })
      },
      releaseFreeze(userId){
        this.$http.get('/epidemic/admin/unfreezeUser?userId='+userId).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            this.tableData.map(item => {
              if(item.userId == userId)item.isFreeze = 0
            })
          }
        })
      }
    },
  }
</script>

<style scoped>
  #account{
    width: 100%;
  }
  /deep/ .el-table .warning-row {
    background-color: #e9e6f8;
  }
  .block{
    margin-top: 5px;
    float: right;
  }
</style>